<template>
  <div>
    <!-- <input type="text" ref="inputRef" > -->
    <input type="text" v-focus>
    <div v-color="msg">我是测试文字</div>
    <div v-color="'blue'">我是测试文字</div>
    <div v-color="'green'">我是测试文字</div>
  </div>
</template>

<script>
// 自定义的指令, 可以在里面操作dom结构
// 学过的vue内置的指令： v-html  v-show v-if v-for  v-model
export default {
  data() {
    return {
      msg: 'red'
    }
  },
  // 常用的钩子函数 created 发请求，可以访问data上面的数据
  //  mounted 操作dom， 在这里 vue才将dom结构准备好
  mounted(){
    // 原生的语法 document.querySelector('xxx')
    // 在vue里面操作dom ，应该使用vue的语法  $refs
    // console.log(this.$refs.inputRef);
    // this.$refs.inputRef.focus()
  },
  components: {}, // 局部组件注册的属性
  // directives: {  // 局部指令的注册
  //   focus: {
  //     inserted(el) { // 这个el就是我们指令绑定的元素的 dom
  //       el.focus()
  //     }
  //   }
  // }
directives: {
  color: {
    // 指令的钩子函数，都有4个参数，我们常用的就2个， 第一个是当前dom元素，第二个是指令传递的值
    inserted(el, binding) {
      console.log(el, binding);
      el.style.color = binding.value
    },
    update(el, binding) {
      console.log('指令更新');
      el.style.color = binding.value
    }
  }
}
}
</script>